<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./libs/vue3.js"></script>
    <style>
        .title {
            position: relative;
            transition: all 0.5s;
        }

        /* 手动实现系统内置的2组6个过渡动画类选择器 */
        /* 当元素即将进入的时候, 自动生效 */
        .slide-enter-from {
            left: -300px;
        }

        /*  当元素进入过程中, 自动生效 */
        .slide-enter-active {
            left: -100px;
        }

        /* 当元素进入后,自动生效 */
        .slide-enter-to {
            left: 0;
        }

        /* 当元素即将离开的时候, 自动生效 */
        .slide-leave-from {
            left: 0;
        }

        /* 当元素离开中, 自动生效 */
        .slide-leave-active {
            left: -100px;
        }

        /*  元素离开后, 自动生效 */
        .slide-leave-to {
            left: -300px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 1-使用系统内置组件transition将目标元素包裹 
            appear: 让目标单元素以过渡动画的方式入场( 第一次加载 )
            name: 自定义过渡动画选择器的类名前缀(默认前缀v), 可以用于区分同一个页面中不同元素的过渡动画效果
        -->
        <transition appear name="slide">
            <h1 class="title" v-show="visible">{{msg}}</h1>
        </transition>
        <!-- 通过按钮的点击动态切换h1的显示状态, 并且需要加入过渡动画 -->
        <button @click="visible=!visible">toggle</button>
    </div>
</body>
<script>
    // 创建应用实例
    const app = Vue.createApp({
        data() {
            return {
                msg: 'hello vue3!!!',
                // 控制目标元素的显示状态, true表示显示, false表示隐藏
                visible: true
            }
        }
    });
    // 挂载应用实例
    app.mount('#app');
</script>

</html>